<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 500px;
            overflow: hidden;
        }

        #result {
            width: 100%;
            font-size: 12px;
        }

        dl, dt, dd, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        p {
            font-size: 12px;
        }

        dt {
            font-size: 14px;
            font-family: "微软雅黑";
            font-weight: bold;
            border-bottom: 1px dotted #000;
            padding: 5px 0 5px 5px;
            margin: 5px 0;
        }

        dd {
            padding: 5px 0 0 5px;
        }

        li {
            line-height: 28px;
        }
    </style>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=F0i6SrLmHquLVNLCqpExxPrj8mWVdFwx"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>

    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/>
    <!--加载检索信息窗口-->
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css"/>

    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <title>添加地图</title>
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;height: 93%">
    <!--<div style="padding: 20px; background-color: #ffffff;">-->
    <!--顶部-->
    <div class="layui-card layui-col-md12" style="border: 0px;background-color: #F2F2F2;">
        <div class="layui-card-header" style="border: 0px;background-color: #F2F2F2;">
            <div class="layui-form-item">
                <label class="layui-form-label">配送地址</label>
                <div class="layui-input-block layui-col-md6" style="    margin-left: 0px">
                    <input id="suggestId" type="text" name="title" lay-verify="title" autocomplete="off"
                           placeholder="请输入地址"
                           class="layui-input">
                    <div id="searchResultPanel"
                         style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                </div>
                <input type="color" id="markerColor">
                <button class="addAddress layui-btn layui-btn-radius layui-btn-sm layui-btn-normal"
                        onclick="draw(BMAP_DRAWING_POLYGON)"
                        lay-filter="draw" id="draw">绘制
                </button>
                <button class="addAddress layui-btn layui-btn-radius layui-btn-sm layui-btn-normal"
                        onclick="Editing('enable')"
                        lay-filter="openDraw" id="openDraw">编辑
                </button>
                <button class="addAddress layui-btn layui-btn-radius layui-btn-sm layui-btn-normal"
                        onclick="Editing('disable')"
                        lay-filter="closeDraw" id="closeDraw">关闭编辑
                </button>
                <button class="addAddress layui-btn layui-btn-radius layui-btn-sm layui-btn-normal" onclick="clearAll()"
                        lay-filter="closeDraw" id="clearDraw">清除绘制
                </button>
                <button class="addAddress layui-btn layui-btn-radius layui-btn-sm layui-btn-normal"
                        onclick="clearDrawLast()"
                        lay-filter="closeDraw" id="clearDrawLast">清除上次绘制
                </button>
                <button class="addAddress layui-btn layui-btn-radius layui-btn-sm layui-btn-normal" id="addAddress"
                        onclick="saveMap()"
                        lay-filter="addAddress">保存
                </button>
            </div>
        </div>
    </div>
    <!--地图-->
    <div class="layui-row layui-col-space15" style="border: 0px;background-color: #F2F2F2;height: 100%">
        <div class="layui-col-md12" style="border: 0px;background-color: #F2F2F2;height: 95%">
            <div id="allmap" class="layui-card" style="border: 0px;overflow:hidden;zoom:1;height: 100%">
                <div id="map" class="layui-card-body" style="font-size: 15px;height:100%;-webkit-transition: all 0.5s
                 ease-in-out;transition: all 0.5s ease-in-out;height: 100%"></div>
            </div>
        </div>
    </div>
</div>
<!--<div id="shape">坐标为</div>-->
<script src="/js/map/mapInit.js"></script>
<script src="/js/map/searchMap.js"></script>
<script src="/js/map/overlayMap.js"></script>
<script src="/layui/layui.all.js"></script>
<script type="text/javascript">
    var layer;
    layui.use(['element', 'layer', 'form'], function () {
        var table = layui.table;
        var element = layui.element;
        var $ = layui.jquery;
        layer = layui.layer;
        var form = layui.form;
    })
    var overlays = [];
    var overlaycomplete = function (e) {
        overlays.push(e.overlay);
    }
    /**
     * 颜色选择器input改变时间
     * 重新进行绘图初始化
     */
    $('#markerColor').change(function () {
        styleOptions = styleOption();
        drawingManager = drawingManger();
        drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    })
    //多边形样式
    var styleOptions = styleOption();

    /**
     * 定义多边形样式
     */
    function styleOption() {
        return {
            strokeColor: $('#markerColor').val(),    //边线颜色。
            fillColor: $('#markerColor').val(),      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 3,       //边线的宽度，以像素为单位。
            strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
            fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
        }
    }

    //实例化鼠标绘制工具
    var drawingManager = drawingManger();

    /**
     * 实例化鼠标工具
     */
    function drawingManger() {
        return new BMapLib.DrawingManager(map, {
            isOpen: false, //是否开启绘制模式
            //enableDrawingTool: true, //是否显示工具栏
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                offset: new BMap.Size(5, 5), //偏离值
            },
            circleOptions: styleOptions, //圆的样式
            polylineOptions: styleOptions, //线的样式
            polygonOptions: styleOptions, //多边形的样式
            rectangleOptions: styleOptions //矩形的样式
        });
    }

    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    /**
     * 右键点击获取经纬度的方法
     */
    map.addEventListener("rightclick", function (e) {
        if (confirm(e.point.lng + "," + e.point.lat)) {
            $("shape").innerHTML = $("shape").innerHTML + " <br/>(" + e.point.lng + "," + e.point.lat + ")";
        }
    });

    /**
     * 清除所有覆盖物
     */
    function clearAll() {
        for (var i = 0; i < overlays.length; i++) {
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0
    }

    /**
     * 清除上一次绘制
     */
    function clearDrawLast() {
        //最后一个覆盖物的下标
        var lastOver = overlays.length - 1;
        if (lastOver < 0) {
            alert('没有可删除的了');
        }
        map.removeOverlay(overlays[lastOver]);
        overlays.length = lastOver;
    }

    //绘制的所有多边形信息
    var myOverlays = [];

    /**
     * 获取所有点
     */
    function getPoint() {
        console.log('有 ' + overlays.length + ' 个覆盖物');
        for (var i = 0; i < overlays.length; i++) {
            //存放多边形信息
            var over = {};
            var overlay = overlays[i].getPath();
            console.log('overlay', overlay)
            // 几边形
            over.overlayNumber = overlay.length;
            // 多边形填充色
            over.fillColor = overlays[i].getFillColor();
            //多边形的点
            var dots = [];
            for (var j = 0; j < overlay.length; j++) {
                var grid = overlay[j];
                var dot = {};
                dot.lng = grid.lng;
                dot.lat = grid.lat;
                dots.push(dot);
            }
            over.dots = dots;
            myOverlays.push(over);
        }
    }

    /**
     * 开启关闭编辑
     * @param state 状态(等于 enable开启编辑,否则关闭编辑)
     */
    function Editing(state) {
        for (var i = 0; i < overlays.length; i++) {
            state == 'enable' ? overlays[i].enableEditing() : overlays[i].disableEditing();
        }
    }

    /**
     *
     * 绘制模式,绘制多边形,圆形等
     * @param type 覆盖物类型
     */
    function draw(type) {
        drawingManager.open();
        drawingManager.setDrawingMode(type);
    }

        /**
         * 保存地图
         */
        function saveMap() {
            getPoint();
            console.log('myOverlays:', myOverlays);
            $.ajax({
                url: '/baiDuMap/savemap',
                method: "post",
                data: {'data': JSON.stringify(myOverlays)},
                success: function (data) {
                    layer.msg(data.msg);
                },
                error: function () {
                    // layer.msg("添加失败");
                    layer.msg("ajax执行失败");
                }
            });
            myOverlays = [];
        }
</script>
</body>
</html>